<template>
    <div>
        <el-button type="primary" @click="openFullScreen1" v-loading.fullscreen.lock="fullscreenLoading" style="display:none"></el-button>
        <el-form :inline="true" class="demo-form-inline">
			 <span @click="backList()" class="backuy"><i class="el-icon-back"></i></span>
                    <el-form-item label="应用类型:">
                        <span>{{currentDetailInfo.contestTypeStr}}</span>
                    </el-form-item>
                    <el-form-item label="应用面信息:">
                        <span v-show="currentDetailInfo.h">H:{{currentDetailInfo.h}}m  &nbsp; </span>
                        <span v-show="currentDetailInfo.w">W:{{currentDetailInfo.w}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.d">D:{{currentDetailInfo.db}}m ~ {{currentDetailInfo.d}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w1">W1:{{currentDetailInfo.w1}}m &nbsp; </span>
                        <span v-show="currentDetailInfo.w2">W2:{{currentDetailInfo.w2}}m &nbsp; </span>
                    </el-form-item>
                    <el-form-item>
                        <span>{{colorFlag == 1 ? '单白' : '彩色'}}</span>
                    </el-form-item>
                    
                    <el-form-item label="参考项:" class="wid150">
                        <el-select v-model="chooseEchatType" multiple collapse-tags @change="initData">
                            <el-option v-for="item in echatTypeList" :key="item.value" :label="item.name" :value="item.value">{{item.name}}</el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
               
        <div style="height:580px;width:100%;margin: 0;overflow-x: auto;overflow-y:hidden;">
			<div style="width:2400px">
          <div id="echarts_power" style="float: left;width:400px;height:680px;"></div>
          <div id="echarts_lightIntensity1" style="float: left;width:400px;height:680px;"></div>
          <div id="echarts_lightIntensity5" style="float: left;width:400px;height:680px;"></div>
          <div id="echarts_lightIntensity2" style="float: left;width:400px;height:680px;"></div>
          <div id="echarts_lightIntensity6" style="float: left;width:400px;height:680px;"></div>
          <div id="echarts_lightIntensity4" style="float: left;width:400px;height:680px;"></div>
        </div>
        </div>
    </div>
</template>

<script>
Array.prototype.map = function(fn, thisObj) {
  var scope = thisObj || window;
  var a = [];
  for ( var i=0, j=this.length; i < j; ++i ) {
    a.push(fn.call(scope, this[i], i, this));
  }
  return a;
};
export default {
  name: 'hello',
  data () {
    return {
      fullscreenLoading:false,
		currentDetailInfo:{},
		ids:"",
        echatTypeList : [
                { value: '1', name: '参考值'},
                { value: '2', name: '平均值'},
                { value: '3', name: '推荐·低'},
                { value: '4', name: '推荐·中'},
                { value: '5', name: '推荐·高'}],
        chooseEchatType:['1','2','3','4','5']
    }
  },
  props:['colorFlag','contestId','contestTypeStr'],
  methods: {
	openFullScreen1() {
    	this.fullscreenLoading = true;
	},
	getRandomColor(){
		return '#'+'0123456789abcdef'.split('').map(function(v,i,a){
    	return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');
	},	
    generateArr(length,value){
        var dataArr = new Array(length);
        for(var i=0;i<dataArr.length;i++){
            dataArr[i] =value;
        }
        return dataArr;
    },
    backList(){
        this.$emit('backDetail');
    },
	setContestDetetionIds(ids,request){
		this.ids = ids
		this.currentDetailInfo = request
	},
    initData(){
      this.openFullScreen1()

        var myChartPower = this.$echarts.init(document.getElementById("echarts_power"));

        var myChartLightIntensity1 = this.$echarts.init(document.getElementById("echarts_lightIntensity1"));
        var myChartLightIntensity5 = this.$echarts.init(document.getElementById("echarts_lightIntensity5"));
        var myChartLightIntensity2 = this.$echarts.init(document.getElementById("echarts_lightIntensity2"));
        var myChartLightIntensity6 = this.$echarts.init(document.getElementById("echarts_lightIntensity6"));
        var myChartLightIntensity4 = this.$echarts.init(document.getElementById("echarts_lightIntensity4"));

        
        var xAxisData =[];

        var powerColumnData =[];
        var powerAssistData =[];

        var lightIntensity1ColumnData =[];
        var lightIntensity1AssistData =[];

        var lightIntensity2ColumnData =[];
        var lightIntensity2AssistData =[];

        var lightIntensity4ColumnData =[];
        var lightIntensity4AssistData =[];

        var lightIntensity5ColumnData =[];
        var lightIntensity5AssistData =[];


        var lightIntensity6ColumnData =[];
        var lightIntensity6AssistData =[];


        var series =[];
        var lightIntensity1Series =[];
        var lightIntensity2Series =[];
        var lightIntensity4Series =[];
        var lightIntensity5Series =[];
		var lightIntensity6Series =[];
		
		var refTypeStr = '1,2,3,4,5' 
        var temp = ''
        for(var i =0;i<this.chooseEchatType.length;i++){
            temp += this.chooseEchatType[i] + ","
        }
        refTypeStr = temp.substring(0,temp.length-1)
		
		var params = {
			detetionIds:this.ids,
			refTypeStr:refTypeStr
		}
		let self  = this

        this.$http.postQuery('/api/contestStatistics/contestIndexForSupplierJson/'+this.colorFlag+'/'+this.contestId,params,function(res){
			var data = res.data
          self.fullscreenLoading = false;
			var length = data.indexList.length;
				for(var i=0 ;i<data.indexList.length;i++){
					var contestIndexRef = data.indexList[i];
					xAxisData.push(contestIndexRef.refType);
					powerColumnData.push(contestIndexRef.power);
					powerAssistData.push(0);
					
					lightIntensity1ColumnData.push(contestIndexRef.lightIntensity1);
					lightIntensity1AssistData.push(0);
					
					lightIntensity2ColumnData.push(contestIndexRef.lightIntensity2);
					lightIntensity2AssistData.push(0);
					
					lightIntensity4ColumnData.push(contestIndexRef.lightIntensity4);
					lightIntensity4AssistData.push(0);
					
					lightIntensity5ColumnData.push(contestIndexRef.lightIntensity5);
					lightIntensity5AssistData.push(0);
					
					lightIntensity6ColumnData.push(contestIndexRef.lightIntensity6Max - contestIndexRef.lightIntensity6);
					lightIntensity6AssistData.push(contestIndexRef.lightIntensity6);
				}
				series.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: powerAssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				  /*   label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:powerColumnData
				});
				
				
				//平均亮度
				lightIntensity1Series.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: lightIntensity1AssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				 /*    label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:lightIntensity1ColumnData
				});
				
				//最大亮度
				lightIntensity2Series.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: lightIntensity2AssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				/*     label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:lightIntensity2ColumnData
				});
				
				
				//最小亮度
				lightIntensity4Series.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: lightIntensity4AssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				 /*    label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:lightIntensity4ColumnData
				});
				
				//最小亮度
				lightIntensity6Series.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: lightIntensity6AssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				 /*    label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:lightIntensity6ColumnData
				});
				
				// 均匀度
				lightIntensity5Series.push({
				    name: '辅助',
				    type: 'bar',
				    stack:  '总量',
				    itemStyle: {
				        normal: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        },
				        emphasis: {
				            barBorderColor: 'rgba(0,0,0,0)',
				            color: 'rgba(0,0,0,0)'
				        }
				    },
				    data: lightIntensity5AssistData
				},{
				    name: '',
				    type: 'bar',
				    stack: '总量',
				 /*    label: {
				        normal: {
				            show: true,
				            position: 'inside'
				        }
				    }, */
				    itemStyle: {
				        normal: {
				            color: '#ED7D31'
				        }
				    },
				    data:lightIntensity5ColumnData
				});
				
				
			
				if(data.detectionList){
					
					for(var i=0 ;i<data.detectionList.length;i++){
						var currentColor = self.getRandomColor()
						var objectPower ={type: 'line',smooth: true,color:currentColor};
						var objectLightIntensity1 ={type: 'line',smooth: true,color:currentColor};
						var objectLightIntensity2 ={type: 'line',smooth: true,color:currentColor};
						var objectLightIntensity4 ={type: 'line',smooth: true,color:currentColor};
						var objectLightIntensity5 ={type: 'line',smooth: true,color:currentColor};
						var objectLightIntensity6 ={type: 'line',smooth: true,color:currentColor};
						
						var detection = data.detectionList[i];
						objectPower.name= detection.posCode;
						objectPower.data = self.generateArr(length,detection.power);
						series.push(objectPower);
						
						
						objectLightIntensity1.name= detection.posCode;
						objectLightIntensity1.data = self.generateArr(length,detection.lightIntensity1);
						lightIntensity1Series.push(objectLightIntensity1);
						
						objectLightIntensity2.name= detection.posCode;
						objectLightIntensity2.data = self.generateArr(length,detection.lightIntensity2);
						lightIntensity2Series.push(objectLightIntensity2);
						
						objectLightIntensity4.name= detection.posCode;
						objectLightIntensity4.data = self.generateArr(length,detection.lightIntensity4);
						lightIntensity4Series.push(objectLightIntensity4);
						
						
						objectLightIntensity5.name= detection.posCode;
						objectLightIntensity5.data = self.generateArr(length,detection.lightIntensity5);
						lightIntensity5Series.push(objectLightIntensity5);
						
						objectLightIntensity6.name= detection.posCode;
						objectLightIntensity6.data = self.generateArr(length,detection.lightIntensity6);
						lightIntensity6Series.push(objectLightIntensity6);
						
					}
				}
				

				var option = {
						 backgroundColor: '#f6f6fd',
						  textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '功率(w)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},				       
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					         formatter: function (params) {
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ params[1].marker + params[1].name + ' ' +params[1].value
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData,
					        nameTextStyle: {
			                      color: 'black',
			                      fontSize: 14
			                  },
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: series
					};


				var optionLightIntensity1 = {
						backgroundColor: '#f6f6fd',
					    title: {
					        text: '0°(cd)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					    textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	var tar0 = params[0];
					            var tar = params[1];
					           var maxValue = tar0.value +tar.value;
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ tar.marker + tar.name + ' ' +tar0.value + '~'+maxValue
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: lightIntensity1Series
					};
					
					
				var optionLightIntensity2 = {
					    backgroundColor: '#f6f6fd',
					    textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '水平右60°(cd)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ params[1].marker + params[1].name + ' ' +params[1].value
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: lightIntensity2Series
					};
					
				var optionLightIntensity4 = {
						backgroundColor: '#f6f6fd',
						  textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '垂直下60°(cd)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	var tar0 = params[0];
					            var tar = params[1];
					           var maxValue = tar0.value +tar.value;
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ tar.marker + tar.name + ' ' +tar0.value + '~'+maxValue
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: lightIntensity4Series
					};
					
				var optionLightIntensity5 = {
						backgroundColor: '#f6f6fd',
						  textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '水平左60°(cd)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	var tar0 = params[0];
					            var tar = params[1];
					           var maxValue = tar0.value +tar.value;
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ tar.marker + tar.name + ' ' +tar0.value + '~'+maxValue
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: lightIntensity5Series
					};
				
				var optionLightIntensity6 = {
						backgroundColor: '#f6f6fd',
						  textStyle: {
		                      color: 'black',
		                      fontSize: 16
		                  },
					    title: {
					        text: '垂直上30°(cd)',
					        left:'center',
					        textStyle:{ //设置主标题风格
					        	color:'black'//设置主标题字体颜色
					        	},	
					        //subtext: 'From ExcelHome',
					       // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
					    },
					     tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        },
					        formatter: function (params) {
					        	var tar0 = params[0];
					            var tar = params[1];
					           var maxValue = tar0.value +tar.value;
					        	 var str ='<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
					        		+ tar.marker + tar.name + ' ' +tar0.value + '~'+maxValue
			                          + '</div>';
			                          
					        	 for(var i=2;i<params.length;i++){
					        		 var obj = params[i];
					        		 str += obj.marker +obj.seriesName + '：' + obj.value + '<br>'
					        	 }
					        	return str;
					        } 
					    }, 
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
					    xAxis: {
					        type : 'category',
					        splitLine: {show:false},
					        data : xAxisData
					    },
					    yAxis: {
					        type : 'value'
					    },
					    series: lightIntensity6Series
					};
				
				myChartPower.clear();
				myChartLightIntensity1.clear();
				myChartLightIntensity2.clear();
				myChartLightIntensity4.clear();
				myChartLightIntensity5.clear();
				myChartLightIntensity6.clear();

				myChartPower.setOption(option);
				myChartLightIntensity1.setOption(optionLightIntensity1);
				myChartLightIntensity2.setOption(optionLightIntensity2);
				myChartLightIntensity4.setOption(optionLightIntensity4);
				myChartLightIntensity5.setOption(optionLightIntensity5);
				myChartLightIntensity6.setOption(optionLightIntensity6);
        })
      
    }
  }
}
</script>
<style>
    .top{
        margin-bottom: 20px;
        
    }
    .button{
            background-color: #5b65a1;
            border-radius: 4px;
            color: #fff;
            padding: 12px 20px;
            font-size: 14px;
            border: none;
            margin-right: 20px;
            cursor: pointer;
        }
    </style>